import speak from './speak'
export default function (pdfDoc, props) {
  const { speakText, speakPause, speakResume, speakStop, speakPlaying } =
    speak()
  const renderPdfPage = async (pageNumber) => {
    const renderPage = async (pageNum) => {
      const { canvasBlur, observeOn } = await pdfEle(pageNum)
      // TODO：控制页面号
      // 版本0.2预留
      // const pageLabel = pageNumberEle(pageNum)
      // const pageContainer = document.createElement('div')
      // pageContainer.className = 'breeze__pdf-container'
      // pageContainer.appendChild(canvasBlur)
      // pageContainer.appendChild(pageLabel)
      observeOn()
      return canvasBlur
    }
    const vueNode = await renderPage(pageNumber)
    return vueNode
  }
  async function pdfEle(pageNum) {
    const page = await pdfDoc.getPage(pageNum)
    const canvasBlur = document.createElement('canvas')
    const ctxBlur = canvasBlur.getContext('2d')
    const canvasClear = document.createElement('canvas')
    const ctxClear = canvasClear.getContext('2d')
    const dpr = window.devicePixelRatio || 1
    const bsr =
      ctxBlur.webkitBackingStorePixelRatio ||
      ctxBlur.mozBackingStorePixelRatio ||
      ctxBlur.msBackingStorePixelRatio ||
      ctxBlur.oBackingStorePixelRatio ||
      ctxBlur.backingStorePixelRatio ||
      1
    const ratio = (dpr / bsr) * 2
    const viewport1 = page.getViewport({
      scale: props.scale / props.blur,
      rotation: props.rotation
    })
    canvasBlur.width = viewport1.width * ratio
    canvasBlur.height = viewport1.height * ratio
    canvasBlur.style.width = viewport1.width * props.blur + 'px'
    ctxBlur.setTransform(ratio, 0, 0, ratio, 0, 0)
    const renderContextBlur = {
      canvasContext: ctxBlur,
      viewport: viewport1
    }
    await page.render(renderContextBlur)
    // 清晰的canvas异步渲染
    const viewport2 = page.getViewport({
      scale: props.scale,
      rotation: props.rotation
    })
    canvasClear.width = viewport2.width * ratio
    canvasClear.height = viewport2.height * ratio
    canvasClear.style.width = viewport2.width + 'px'
    ctxClear.setTransform(ratio, 0, 0, ratio, 0, 0)
    const renderContextClear = {
      canvasContext: ctxClear,
      viewport: viewport2
    }
    if (props.speak) {
      canvasClear.addEventListener('click', () => {
        if (speakPlaying.value()) {
          console.log('这是啥子嘛', speakStop)
          speakStop.value()
          return
        }
        speakPDFPage(page)
      })
    }
    // TODO：完全控制语音播放
    // 版本0.2预留事件
    // canvasClear.addEventListener('speakStart', () => {
    //   speakPDFPage(page)
    // })
    // canvasClear.addEventListener('speakPause', () => {
    //   speakPause.value(page)
    // })
    // canvasClear.addEventListener('speakResume', () => {
    //   speakResume.value()
    // })
    // canvasClear.addEventListener('speakStop', () => {
    //   speakStop.value()
    // })
    /* eslint-disable */
    // if (responsiveVoice.isPlaying()) {
    //   speakPause.value()
    // } else {
    //   speakResume.value()
    page.render(renderContextClear)
    const displayArea = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.replaceWith(canvasClear)
        }
      })
    })
    const observeOn = function () {
      return displayArea.observe(canvasBlur)
    }
    return { canvasBlur, observeOn }
  }
  async function speakPDFPage(page) {
    const content = await page.getTextContent()
    let textContent = ''

    content.items.forEach((item) => {
      textContent += item.str + ' '
    })
    speakText.value(textContent)
  }
  return {
    renderPdfPage
  }
}
